<template>
  <div class="{{moduleName}}-page">
    <n-space class="{{moduleName}}-container" :vertical="true">
      <n-form inline label-width="auto" :model="formValue" ref="formRef">
        {{each queryParams}}
        <n-form-item label="{{$value.COLUMN_COMMENT}}" path="{{$value.COLUMN_NAME}}">
          <n-input v-model:value="formValue.{{$value.COLUMN_NAME}}" placeholder="输入{{$value.COLUMN_COMMENT}}" />
        </n-form-item>
        {{/each}}
        <n-form-item>
          <n-button @click="queryForm" attr-type="button">查询</n-button>
        </n-form-item>
        {{if insert}}
        <n-form-item>
          <n-button @click="insertRow()" attr-type="button">添加</n-button>
        </n-form-item>
        {{/if}}
      </n-form>
      <n-data-table class="{{moduleName}}-table" :columns="columns" :data="data" :pagination="pagination" />
    </n-space>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue"
import { NForm, NFormItem, NInput, NButton, NSpace, NDataTable, useDialog, useMessage } from "naive-ui"
import { useRouter } from "vue-router"
import api from "@/network/api"
import { renderTableCols } from "@/composition/table"

const router = useRouter()
const dialog = useDialog()
const message = useMessage()

const formRef = ref()
const formValue = ref({
  {{each queryParams}}
  {{$value.COLUMN_NAME}}: "",
  {{/each}}
})

const data = ref([])

onMounted(async () => {
  await queryForm()
})

const queryForm = async () => {
  let response: any = await api.queryForm()
  data.value = response.data.data
}

{{if insert}}
const insertRow = (parentId?: number) => {
  router.push({ path: "/{{moduleName}}/form" })
}
{{/if}}

const tableColMeta = [
  {{each cols}}
  { title: "{{$value.COLUMN_COMMENT}}", key: "{{$value.COLUMN_NAME}}" },
  {{/each}}
  { title: "操作", key: "#" },
]

const optActions = [
  {
    name: "详情",
    action: (row: any) => router.push({ path: "/{{moduleName}}/form", query: { id: row.id, isView: 1 } }),
  },
  {{if update}}
  {
    name: "修改",
    action: (row: any) => router.push({ path: "/{{moduleName}}/form", query: { id: row.id } }),
  },
  {{/if}}
  {
    name: "删除",
    action: (row: any) => {
      dialog.warning({
        title: "警告",
        content: "你确定删除这条记录吗？",
        positiveText: "删除",
        negativeText: "取消",
        onPositiveClick: async () => {
          let response: any = await api.remove{{moduleName}}({ id: row.id })
          if (response.data.successful) {
            message.success("删除成功！")
            await queryForm()
          }
        },
      })
    },
  },
]

const columns = ref(renderTableCols(tableColMeta, optActions))

const pagination = {
  pageSize: 10,
}
</script>

<style lang="less" scoped>
.{{moduleName}}-page {
  height: 100%;

  .{{moduleName}}-container {
    padding: 10px 20px;
  }
}
</style>
